<template>
  <div class="body">
    <!-- 标题 -->
    <!-- <h1 class="title">{{ msg }}</h1> -->
    <v-head></v-head>
    <!-- 搜索框 -->
    <Row class="shhf">
      <i-col class="servicetitle" span="24">
        <div class="servicecontent">
          <Row class="serviceirow">
            <i-col  span="24">
              <Row class="stjy">
                <i-col class="sytjdi" span="7">
                  <div class="ity">已收录标准<br>{{xtysl}}</div>
                  <!-- <div class="sytjqk">现行:111,废止:222</div> -->
                </i-col>
                <i-col class="sytjdi" span="7">
                  <div class="ity1">国家标准<br>{{gbysl}}</div>
                  <!-- <div class="sytjqk">现行:111,废止:222</div> -->
                </i-col>
                <i-col class="sytjdi" span="7">
                  <div class="ity2">地方标准<br>{{dbysl}}</div>
                  <!-- <div class="sytjqk">现行:111,废止:222</div> -->
                </i-col>
              </Row>
            </i-col>
            <!-- <i-col class="sitemfy" span="3">
              <p class="standfwi"></p>
              <p class="standfwi"></p>
              <p class="standfwi"></p>
              企业标准水平评价
            </i-col> -->
          </Row>
        </div>
      </i-col>
    </Row>
    <Row class="shh">
      <i-col class="servicetitle" span="24">
        <i-col class="sytjdi" span="7">
          <span class="standserver" ><span @click="queren('info')">标准时效性确认</span></span>
        </i-col>
        <i-col class="sytjdi" span="7">
          <span class="standserver1" ><span @click="chaxin('info')">标准查新</span></span>
        </i-col>
        <i-col class="sytjdi" span="7">
          <span class="standserver2" ><span @click="tuoguan('info')">标准托管</span></span>
        </i-col>
      </i-col>
    </Row>
    <Row class="shh">
      <i-col span="24">
        <Row class="search-p search-b">
          <!-- <i-col span="5">
            <i-select v-model="model1" size="large" class="search-margin">
              <i-option v-for="item in searchList" :key="item.index" :value="item.value">{{ item.label }}</i-option>
            </i-select>
          </i-col> -->
          <i-col span="18" class="search-input">
            <i-input search enter-button placeholder="请输入关键字"  @on-search='getSearchResult()' v-model="keyword" size="large"  class="search-margin"/>
          </i-col>
          <Row class="keyrow">
            <Row>
              <i-col>
                <i-button class="search-btn-l" @click="seniorsearch" type="primary">高级检索</i-button>
              </i-col>
            </Row>
            <Row class="dengluh">
              <i-col span="10">
                <span class="guanjian">实时热搜:</span>
                <span class="guanjianpic" @click="changeSearchHot()"><Icon size="20" type="ios-refresh" ></Icon>换一批</span>
              </i-col>
            </Row>
            <Row>
              <i-col class="keywor" span="24">
                <!-- <Badge :count="100" v-for="item in keylist" :key="item" :name="item"> -->
                  <span href="#" v-for="item in keylist" @click='getSearchHot(item)' :key="item" :name="item"  ><span v-if="item!='undefined'" class="hotkey">{{ item }}</span></span>
                <!-- </Badge> -->
              </i-col>
            </Row>
          </Row>
        </Row>
      </i-col>
    </Row>
    <!-- 搜索框 -->
    <!-- <Row>
      <i-col span="24">
        <Row class="search-p search-b">
        <i-col span="5">
          <i-select v-model="model1" size="large" class="search-margin">
            <i-option v-for="item in searchList" :key="item.index" :value="item.value">{{ item.label }}</i-option>
          </i-select>
        </i-col>
          <i-col span="10" class="search-input"> <i-input search enter-button placeholder="检索..." size="large"  class="search-margin"/></i-col>
        <i-col span="5" class="search-btn">
           <Button type="default" size="large"  @click="seniorsearch"  class="search-margin">高级检索</Button>
        </i-col>
        <i-col span="2">
          <Button type="info" class="search-btn-l" v-show="islog" @click="userLogin">登录</Button>
          <Button type="info" class="search-btn-l" v-show="islogin" @click="personCenter">{{username}}</Button>
          <br>
          <Button type="info" class="search-btn-l" v-show="islog" @click="userLogin">注册</Button>
          <Button type="info" class="search-btn-l" v-show="islogin"  @click="userlogout">退出</Button>
        </i-col>
        </Row>
      </i-col>
    </Row>
    <Row class="keyrow">
        <i-col class="keywor" span="24">
          <span class="guanjian">关键词:</span>
           <Badge :count="100" v-for="item in keylist" :key="item" :name="item">
        <a href="#" class="demo-badge">{{ item }}</a>
    </Badge>
        </i-col>
    </Row> -->
    <!-- 地方标准免费公开 -->
    <Row class="localstandard">
        <i-col span="24">
          <div  @click='getlocal()'  class="dbgk"></div>
        </i-col>
    </Row>
    <Row class="localstandard1">
        <i-col span="24">
          <div  @click='getlocal()'  class="dbgk1"></div>
        </i-col>
    </Row>
    <Row class="shh">
        <i-col class="standjiedu" span="12">
          <div class="standardt">
            <Icon size='20' type="ios-list"></Icon>
                标准公告
            <p class="standdmo" @click="tonoticelist">
              <Icon size='15'  type="ios-add-circle"></Icon>
              <span>更多</span>
            </p>
          </div>
           <div v-for="noticeitem in noticelist" :key="noticeitem">
              <Row class="newsrow">
                <i-col span="23">
                  <p class="xinwenita" @click="geNoticeDetail(noticeitem.id)">
                  <span class="standardtitletzg">{{ noticeitem.title }}</span>
                  <span class="standardtime">{{ noticeitem.createDate.substring(0,10) }}</span>
                  </p>
                </i-col>
              </Row>
            </div>
        </i-col>
        <i-col class="standkepu" span="12">
          <div class="standardt">
            <Icon size='20' type="ios-list"></Icon>
                新闻动态
            <p class="standdmo" @click="tonewslist">
              <Icon size='15' type="ios-add-circle"></Icon>
              <span>更多</span>
            </p>
          </div>
          <div v-for="newsitem in newslist" :key="newsitem">
            <Row class="standjrow">
              <i-col span="23">
                <p class="xinwenita" @click="getNewsDetail(newsitem.id)">
                  <span class="standardtitletzg">{{ newsitem.title }}</span>
                  <span class="standardtime">{{ newsitem.createDate.substring(0,10) }}</span>
                </p>
              </i-col>
            </Row>
          </div>
        </i-col>
    </Row>
    <!-- 近期发布标准 -->
    <Row class="newsr">
        <i-col span="24">
          <Tabs class="biaotab" active-key="key1">
             <Tab-pane label="即将实施标准" icon="ios-book-outline">
              <ol>
                <li v-for="index in soonlist" :key="index">
                  <Row class="newsrow1">
                    <i-col span="23">
                      <div class="soonbiaozhun" @click="getStandDetail(index.Id)">
                        <span class="standardtitle">{{ index.StandNum }}{{ index.Cn }}</span>
                        <span class="standardtime">{{ index.Efd }}</span>
                      </div>
                    </i-col>
                  </Row>
                </li>
              </ol>
            </Tab-pane>
            <Tab-pane class="standardpane" label="近期发布标准" icon="ios-book-outline">
              <ol>
                <li v-for="index in releasedlist" :key="index">
                  <Row class="newsrow1">
                    <i-col span="23">
                      <div class="releasedbiaozhun" @click="getStandDetail(index.Id)">
                        <span class="standardtitle">{{ index.StandNum }}{{ index.Cn }}</span>
                        <span class="standardtime">{{ index.Isd }}</span>
                      </div>
                    </i-col>
                  </Row>
                </li>
              </ol>
            </Tab-pane>
          </Tabs>
        </i-col>
    </Row>
    <v-foot></v-foot>
    <Back-top></Back-top>
  </div>
</template>

<script>
import searchImg from '../assets/img/search.png'
import {neturl} from '../assets/js/common'
export default {
  name: 'Index',
  data () {
    return {
      userinfo: '',
      setting: {
        autoplay: true,
        autoplaySpeed: 2000,
        dots: 'inside',
        radiusDot: false,
        trigger: 'click',
        arrow: 'hover'
      },
      msg: '内蒙古标准信息公共服务平台',
      theme1: 'light',
      byname: 'bymenu',
      searchImg: searchImg,
      value: '',
      islogin: false,
      islog: true,
      username: '',
      value2: 0,
      keylist: [],
      searchList: [
        {
          value: 'guojia',
          label: '国家标准'
        },
        {
          value: 'hangye',
          label: '行业标准'
        },
        {
          value: 'difang',
          label: '地方标准'
        }
      ],
      newslist: [],
      noticelist: [],
      releasedlist: [],
      soonlist: [],
      model1: '',
      hzjg: '',
      xtysl: '',
      dbysl: '',
      gbysl: '',
      keyword: '',
      m: 0,
      n: 10
    }
  },
  methods: {
    // 标准确认
    queren (type) {
      const title = '标准时效性确认'
      const content = '<p>&#12288;&#12288;随着入世后我国经济不断与国际接轨，标准化在企业经济活动中的作用与地位日益加强，企业对标准的需求也由' +
      '单一的标准资料传递服务逐渐向多样化、综合性的标准化服务发展。“标准有效性确认服务”是由长期从事标准信息研究' +
      '和服务的专业技术人员，根据您的需求，不断从国内外各种大型标准信息数据库系统、标准制定机构的官方网站、标准' +
      '化期刊等多种信息管道，对相关的技术标准、技术法规进行跟踪，并向您定期报告相关资料的最新状态，如：标准是否' +
      '被更新、替代、修订或作废等信息，从而可以使您及时更新和调整产品生产和销售策略，减少因信息不畅所造成的巨额损失。</p>' +
      '<p>服务程序</p>' +
      '<p>&#12288;&#12288;1. 客户提交需要"标准有效性查证"的技术标准和法规的目录清单。</p>' +
      '<p>&#12288;&#12288;2. 客户按服务收费规定交纳相应的服务费。</p>' +
      '<p>&#12288;&#12288;3. 我们的专业技术人员即开始对您要求的技术标准进行跟踪，并按规定时间向您寄送一份“标准跟踪报告”（内容包' +
      '括：相关标准是否被修改、替代、增补或作废）。</p>'
      switch (type) {
        case 'info':
          this.$Modal.info({
            title: title,
            content: content
          })
          break
      }
    },
    // 标准查新
    chaxin (type) {
      const title = '标准查新'
      const content = '<p>&#12288;&#12288;将新产品及其相关的技术指标、工艺流程、检测方法形成技术标准是新产品实现大规模工业' +
      '化生产的必要前提条件。而在制定一项新的技术标准之前，首先应当查询有无同类的国内外技术' +
      '标准，以免重复投入大量人力所制定的标准与已普遍使用的标准产生矛盾。标准查新服务是根据' +
      '您的新产品及相关需求，定制专门的查询策略，通过我院所拥有的标准信息数据库系统，查询相' +
      '关技术标准，并出具标准查新报告或标准清单。</p>' +
      '<p>工作流程：</p>' +
      '<p>&#12288;&#12288;第一步：顾客提出标准查新委托，提供标准和相关资料；</p>' +
      '<p>&#12288;&#12288;第二步：服务确认，缴纳费用；</p>' +
      '<p>&#12288;&#12288;第三步：制定查询策略，通过相关数据库进行查询；</p>' +
      '<p>&#12288;&#12288;第四步：出具查新报告和/或标准清单。</p>'
      switch (type) {
        case 'info':
          this.$Modal.info({
            title: title,
            content: content
          })
          break
      }
    },
    // 标准托管
    tuoguan (type) {
      const title = '标准托管'
      const content = '<p>&#12288;&#12288;服务介绍' +
      '该业务是由长期从事标准信息研究和服务的专业技术人员，根据您的需求，定期地依据国内外大型标准' +
      '信息数据库系统、标准制定机构的官方网站等多种信息渠道，对相关的技术标准、技术法规进行跟踪，并向' +
      '您定期报告相关标准的最新状态，如：标准是否被更新、替代、修订或作废等信息，从而可以使您及时更新' +
      '和调整产品生产和销售策略，减少因信息不畅所造成的巨额损失。' +
      '<p>办理流程</p>' +
      '<p>&#12288;&#12288;1、客户按照实际需要提交托管信息。</p>' +
      '<p>&#12288;&#12288;2、签订协议并提交相关资料。</p>' +
      '<p>&#12288;&#12288;3、按照约定时间出具报告。</p>' +
      '<p>资料提交</p>' +
      '<p>&#12288;&#12288;1、营业执照复印件（需盖公章）</p>' +
      '<p>&#12288;&#12288;2、标准数据的明细清单（电子版和纸质版）</p>' +
      '<p>&#12288;&#12288;3、所提供资料的真实性声明（需盖公章）</p>'
      switch (type) {
        case 'info':
          this.$Modal.info({
            title: title,
            content: content
          })
          break
      }
    },
    // 获取近期发布
    GetRecentlyReleased () {
      this.$axios.post(neturl + '/by/standard/getrecentlyreleased'
      ).then(res => {
        // console.log(res)
        this.releasedlist = res.data.data.result
      })
    },
    // 获取即将实施
    GetComingSoon () {
      this.$axios.post(neturl + '/by/standard/getcomingsoon'
      ).then(res => {
        // console.log(res)
        this.soonlist = res.data.data.result
      })
    },
    // 热词换批
    changeSearchHot () {
      this.keylist = ''
      this.n += 10
      this.m += 10
      console.log(this.n)
      console.log(this.m)
      let uploadcc = { data: '{n: ' + this.n + ', m: ' + this.m + '}' }
      this.$axios.post(neturl + '/by/standard/gethotword', uploadcc
      ).then(res => {
        console.log(res)
        console.log(this.keylist)
        this.keylist = res.data.data.result
      })
    },
    // 热词跳转
    getSearchHot (hotkey) {
      let routeUrl = this.$router.resolve({path: '/seniorsearch', query: {keyword: hotkey}})
      window.open(routeUrl.href, '_blank')
    },
    // 搜索框跳转
    getSearchResult () {
      let routeUrl = this.$router.resolve({path: '/seniorsearch', query: {keyword: this.keyword}})
      window.open(routeUrl.href, '_blank')
    },
    // 新闻列表页面跳转
    tonewslist () {
      let routeUrl = this.$router.resolve({
        path: '/newlist'
      })
      window.open(routeUrl.href, '_blank')
    },
    // 地方标准免费公开
    getlocal () {
      let routeUrl = this.$router.resolve({
        path: '/localstand'
      })
      window.open(routeUrl.href, '_blank')
    },
    // 通知公告列表页面跳转
    tonoticelist () {
      let routeUrl = this.$router.resolve({
        path: '/noticelist'
      })
      window.open(routeUrl.href, '_blank')
    },
    // 新闻列表获取
    getnewslist () {
      let uploadcc = { data: '{page: 1, pagesize: 8, cateid:"8a81a04751467b80015146ad2b670011"}' }
      this.$axios.post(neturl + '/by/news/getlist', uploadcc
      ).then(res => {
        // console.log(res)
        this.newslist = res.data.data.result
        // this.results = res.data.data.result
      })
    },
    getStandDetail (id) {
      let routeData = this.$router.resolve({path: '/standdetail', query: {id: id}})
      window.open(routeData.href, '_blank')
    },
    getNewsDetail (id) {
      // console.log(id)
      let routeData = this.$router.resolve({path: '/newitem', query: {id: id}})
      window.open(routeData.href, '_blank')
    },
    geNoticeDetail (id) {
      // console.log(id)
      let routeData = this.$router.resolve({path: '/noticeitem', query: {id: id}})
      window.open(routeData.href, '_blank')
    },
    // 标准公告获取
    getNoticelist () {
      let uploadcc = { data: '{page: 1, pagesize: 8, cateid:"402881fb56a21c8f0157089d70160003"}' }
      this.$axios.post(neturl + '/by/news/getlist', uploadcc
      ).then(res => {
        // console.log(res)
        this.noticelist = res.data.data.result
        // this.results = res.data.data.result
      })
    },
    // 统计数据获取
    getStandardCount () {
      this.$axios.post(neturl + '/by/standard/getStandardCount'
      ).then(res => {
        // console.log(res)
        // this.results = res.data.data.result
        let ttresult = res.data.data.result
        this.xtysl = ttresult.abt
        this.dbysl = ttresult.dbt
        this.gbysl = ttresult.gbt
      })
    },
    // 搜索热词获取
    getHotword () {
      let uploadcc = { data: '{n: ' + this.n + ', m: ' + this.m + '}' }
      this.$axios.post(neturl + '/by/standard/gethotword', uploadcc
      ).then(res => {
        this.keylist = res.data.data.result
      })
    },
    // 登录
    userLogin () {
      let routeUrl = this.$router.resolve({
        path: '/login'
      })
      window.open(routeUrl.href, '_blank')
    },
    // 个人中心
    personCenter () {
      let routeUrl = this.$router.resolve({
        path: '/usercenter'
      })
      window.open(routeUrl.href, '_blank')
    },
    // 退出
    userlogout () {
      this.$cookie.delete('user')
      window.location.reload()
    },
    seniorsearch () {
      let routeUrl = this.$router.resolve({
        path: '/seniorsearch'
      })
      window.open(routeUrl.href, '_blank')
    }
  },
  created () {
    // 获取近期发布
    this.GetRecentlyReleased()
    // 获取即将实施
    this.GetComingSoon()
    // 获取新闻列表
    this.getnewslist()
    // 获取地方标注公告
    this.getNoticelist()
    // 获取标准数据
    this.getStandardCount()
    // 获取搜索热词
    this.getHotword()
    // this.model1 = this.cityList[0].value
    this.userinfo = this.$cookie.get('user')
    this.userinfo = JSON.parse(this.userinfo)
    // 已登录
    if (this.userinfo != null) {
      this.islogin = true
      this.islog = false
      this.username = this.userinfo.realName
    }
    this.isShow = false
    this.isShow = true
  }
}
</script>

<style scoped>
  @import '../assets/css/index.css';
</style>
